{extend name="public/layout" /}
{block name="content"}
<div class="row">

    <div class="col-lg-3 col-md-3 hidden-sm hidden-xs author-info">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="text-center">
                    作者：{$topic->user->name}
                </div>
                <hr>
                <div class="media">
                    <div align="center">
                        <a href="{:url('user/read', ['id' => $topic->user_id])}">
                            <img class="thumbnail img-responsive" src="{$topic->user->avatar}" width="300px" height="300px">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12 topic-content">
        <div class="panel panel-default">
            <div class="panel-body">
                <h1 class="text-center">
                    {$topic->title}
                </h1>

                <div class="article-meta text-center">
                    {$topic->create_time}
                    ⋅
                    <span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
                    {$topic->reply_count}
                </div>

                <div class="topic-body">
                    {$topic->body|raw}
                </div>

                {if(!empty($current_user) && $topic->user_id == $current_user->id)}
                    <div class="operate">
                        <hr>
                        <a href="{:url('topic/edit', ['id' => $topic->id])}" class="btn btn-default btn-xs pull-left" role="button">
                            <i class="glyphicon glyphicon-edit"></i> 编辑
                        </a>

                        <form id='delete-form' action="{:url('topic/delete', ['id' => $topic->id])}" method="post">
                            {:token()}
                            <input type="hidden" name="_method" value="DELETE">
                            <button type="submit" class="btn btn-default btn-xs pull-left" style="margin-left: 6px">
                                <i class="glyphicon glyphicon-trash"></i>
                                删除
                            </button>
                        </form>
                    </div>
                {/if}
            </div>
        </div>

        <!-- 用户回复列表 -->
        <div class="panel panel-default topic-reply">
            <div class="panel-body">
                {if(!empty($current_user))}
                    {include file="topic/_reply_box", 'topic'='$topic' /}
                {/if}
                {include file="topic/_reply_list", 'reply_paginate'='$reply_paginate' /}
            </div>
        </div>
    </div>
</div>
{/block}
{block name="scripts"}
{js href="/static/plugins/jquery-validation/jquery.validate.min.js" /}
{js href="/static/plugins/jquery-validation/bootstrap.validate.js" /}
<script type="text/javascript">
    jQuery(function($){
        $("form#delete-form").validate({
            submitHandler: function(form){
                var $form = $(form);
                $.ajax({
                    url: $form.attr("action"),
                    type: $form.attr("method"),
                    dataType: "JSON",
                    data: $form.serialize(),
                    success: function(data){
                        if(data.code){
                            location.href = data["url"];
                        }else{
                            alert(data["msg"]);
                        }
                    }, error: function () {
                        alert("数据执行错误！");
                    }
                });
            }
        });

        $("form.delete-reply").validate({
            submitHandler: function(form){
                var $form = $(form);
                $.ajax({
                    url: $form.attr("action"),
                    type: $form.attr("method"),
                    dataType: "JSON",
                    data: $form.serialize(),
                    success: function(data){
                        if(data.code){
                            location.href = location;
                        }else{
                            alert(data["msg"]);
                        }
                    }, error: function () {
                        alert("数据执行错误！");
                    }
                });
            }
        });


        $("form#reply-form").validate({
            ignore: '',
            rules:{
                "topic_id":{
                    required: true,
                    min: 1
                }, "content":{
                    required: true,
                    minlength: 3,
                    maxlength: 200
                }
            },
            messages:{
                "topic_id":{
                    required: '所属话题不能为空',
                    min: '所属话题不存在'
                }, "content":{
                    required: '评论内容不能为空',
                    minlength: '标题长度必须在3-200个字符之间',
                    maxlength: '标题长度必须在3-200个字符之间'
                }
            },
            highlight:function(element) {
                $(element).parents('.form-group').addClass('has-error');
            },
            unhighlight: function(element) {
                $(element).parents('.form-group').removeClass('has-error');
            },
            submitHandler: function(form){
                var $form = $(form);
                $.ajax({
                    url: $form.attr("action"),
                    type: $form.attr("method"),
                    dataType: "JSON",
                    data: $form.serialize(),
                    success: function(data){
                        if(data.code){
                            location.reload();
                        }else{
                            alert(data["msg"]);
                        }
                    }, error: function () {
                        alert("数据执行错误！");
                    }
                });
            }
        });

    });
</script>
{/block}